<template>
  <view class="container">
    <view v-if="!gameStarted" class="start-screen">
      <text>裹蒸棕制作游戏</text>
      <button @click="startGame">开始游戏</button>
    </view>
    <view v-else class="game-screen">
      <view class="time">时间：{{ time }}秒</view>
      <view class="score">得分：{{ score }}</view>
      <view class="materials">
        <view v-for="(material, index) in materials" :key="index">
          <text>{{ material.name }}：</text>
          <view class="carousel">
            <view
              v-for="(item, idx) in material.options"
              :key="idx"
              class="carousel-item"
              :class="{ active: currentMaterialIndex[material.type] === idx }"
              @click="selectMaterial(material.type, item)"
            >
              <image :src="item.image" class="material-image" />
              <text class="material-name">{{ item.name }}</text>
            </view>
          </view>
          <view class="carousel-controls">
            <button @click="prevMaterial(material.type)">上一个</button>
            <button @click="nextMaterial(material.type)">下一个</button>
          </view>
        </view>
      </view>
      <view class="wrapping">
        <text>包裹粽子：</text>
        <view v-if="selectedMaterials.includes('rice') && selectedMaterials.includes('leaf') && selectedMaterials.includes('filling')">
          <button @click="wrapZongzi">包裹粽子</button>
        </view>
        <view v-else>
          <text>请先选择所有材料</text>
        </view>
      </view>
      <view class="cooking">
        <text>煮粽子：</text>
        <view v-if="wrappedZongzi">
          <button @click="cookZongzi">开始煮</button>
        </view>
        <view v-else>
          <text>请先包裹粽子</text>
        </view>
      </view>
      <view class="result">
        <text v-if="cookedZongzi">粽子制作成功！得分：+10</text>
      </view>
    </view>
    <view v-if="gameEnded" class="end-screen">
      <text>游戏结束！</text>
      <text>总得分：{{ score }}</text>
      <button @click="restartGame">再玩一次</button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      gameStarted: false,
      gameEnded: false,
      time: 600,
      score: 0,
      selectedMaterials: [],
      wrappedZongzi: false,
      cookedZongzi: false,
      timer: null,
      currentMaterialIndex: {
        rice: 0,
        leaf: 0,
        filling: 0
      },
      materials: [
        {
          type: 'rice',
          name: '糯米',
          options: [
            { name: '糯米1', image: 'https://tse2-mm.cn.bing.net/th/id/OIP-C.MRZeCWhGPHGRu4c9xz0f6wAAAA?cb=iwp2&rs=1&pid=ImgDetMain' },
            { name: '糯米2', image: 'https://pic.vjshi.com/2023-05-05/1bb1a23c4c9a44c38ece682170b6c087/online/main.jpg?x-oss-process=style/w342_h192_center' },
            { name: '糯米3', image: 'https://img95.699pic.com/photo/50092/3168.jpg_wh300.jpg' }
          ]
        },
        {
          type: 'leaf',
          name: '粽叶',
          options: [
            { name: '粽叶1', image: 'https://so1.360tres.com/t017b048302afc27b0e.png' },
            { name: '粽叶2', image: 'https://tse3-mm.cn.bing.net/th/id/OIP-C.vodu670RkRGQ08tvL-6eCwAAAA?cb=iwp2&rs=1&pid=ImgDetMain' },
            { name: '粽叶3', image: 'https://ts1.tc.mm.bing.net/th/id/R-C.bd6c56e9307df03690db8226bb44ce05?rik=fckOAzVeIWhXHQ&riu=http%3a%2f%2fi3.meishichina.com%2fattachment%2f201202%2f1%2f402071_1328062702aEqa.jpg&ehk=D5%2f97nEH0Rjc%2bvx1zykHeTyRSIND6cHbxUj0Hvexlj8%3d&risl=&pid=ImgRaw&r=0' }
          ]
        },
        {
          type: 'filling',
          name: '馅料',
          options: [
            { name: '馅料1', image: 'https://tse1-mm.cn.bing.net/th/id/OIP-C.BzXcCXKqL52SLuFs04MWMQAAAA?cb=iwp2&rs=1&pid=ImgDetMain' },
            { name: '馅料2', image: 'https://bpic.588ku.com/back_origin_min_pic/19/10/22/e7f696dbb84f4de2ca2bead67039d02e.jpg' },
            { name: '馅料3', image: 'https://bpic.588ku.com/back_origin_min_pic/20/06/15/eff1f7ce0325b729a2fc09c2e515a635.jpg' }
          ]
        }
      ],
      wrappedImage: 'https://img.alicdn.com/i2/140046563/O1CN01id2CIx1yLu4NXlB6n_!!140046563.jpg', // 包好的粽子图片
      cookedImage: 'https://ts1.tc.mm.bing.net/th/id/R-C.c6ec25d8e81e3e6165137ba3efc325bf?rik=hcgLyrzTI7oEpA&riu=http%3a%2f%2fimg95.699pic.com%2fphoto%2f50090%2f9025.jpg_wh860.jpg&ehk=HUoMrpHFeHR3jWzrEyfaDJl6Yy39mxRom%2bWX1%2ftDk1w%3d&risl=&pid=ImgRaw&r=0' // 煮好的粽子图片
    };
  },
  methods: {
    startGame() {
      this.gameStarted = true;
      this.timer = setInterval(() => {
        this.time--;
        if (this.time <= 0) {
          this.endGame();
        }
      }, 1000);
    },
    selectMaterial(type, item) {
      this.selectedMaterials.push(type);
      this.currentMaterialIndex[type] = this.materials.find(m => m.type === type).options.indexOf(item);
    },
    wrapZongzi() {
      this.wrappedZongzi = true;
      this.selectedMaterials = [];
      // 弹出包好的粽子图片
      uni.previewImage({
        current: this.wrappedImage,
        urls: [this.wrappedImage],
        showAnimation: true
      });
    },
    cookZongzi() {
      this.cookedZongzi = true;
      this.score += 10;
      this.wrappedZongzi = false;
      // 弹出煮好的粽子图片
      uni.previewImage({
        current: this.cookedImage,
        urls: [this.cookedImage],
        showAnimation: true
      });
      setTimeout(() => {
        this.cookedZongzi = false;
      }, 2000);
    },
    endGame() {
      clearInterval(this.timer);
      this.gameEnded = true;
    },
    restartGame() {
      this.gameStarted = false;
      this.gameEnded = false;
      this.time = 600;
      this.score = 0;
      this.selectedMaterials = [];
      this.wrappedZongzi = false;
      this.cookedZongzi = false;
      this.currentMaterialIndex = {
        rice: 0,
        leaf: 0,
        filling: 0
      };
    },
    nextMaterial(type) {
      const material = this.materials.find(m => m.type === type);
      this.currentMaterialIndex[type] = (this.currentMaterialIndex[type] + 1) % material.options.length;
    },
    prevMaterial(type) {
      const material = this.materials.find(m => m.type === type);
      this.currentMaterialIndex[type] = (this.currentMaterialIndex[type] - 1 + material.options.length) % material.options.length;
    }
  }
};
</script>

<style scoped>
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
  background-color: #f0f0f0;
}
.start-screen, .end-screen {
  display: flex;
  flex-direction: column;
  align-items: center;
}
button {
  margin: 10px;
  padding: 10px;
  font-size: 16px;
}
.material {
  margin: 5px;
  padding: 5px;
  background-color: #ddd;
  border: 1px solid #ccc;
  cursor: pointer;
}
.material:hover {
  background-color: #ccc;
}
.time, .score {
  margin: 10px;
  font-size: 18px;
}
.result {
  margin: 10px;
  font-size: 18px;
  color: green;
}
.carousel {
  display: flex;
  overflow-x: auto;
  scroll-behavior: smooth;
}
.carousel-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-right: 10px;
  transition: transform 0.5s ease;
}
.carousel-item.active {
  transform: scale(1.1);
}
.material-image {
  width: 100px;
  height: 100px;
}
.material-name {
  font-size: 14px;
}
.carousel-controls {
  display: flex;
  justify-content: space-between;
  width: 100%;
}
</style>